/* eslint-disable no-unused-vars */
/* eslint-disable react/prop-types */
import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
import style from './Login.module.scss'
import { withRouter } from 'react-router-dom'
import { NavLink } from 'react-router-dom';
import Api from '@/api/index';
import { setStore } from '@/utils/commons'

class LoginForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
            captcha: ''
        }
        this.onSubmit = this.onSubmit.bind(this)
    }

    componentDidMount() {
        this.changeCaptcha();
    }

    changeCaptcha = () => {
        Api.getCaptchaCode().then(res => {
            if (res.code == 200) {
                this.setState({ captcha: res.data })
            }
        });
    }

    onSubmit(e) {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                Api.login(values).then(res => {
                    if (res.code == 200) {
                        setStore('userId', res.data.id);
                        setStore('token', res.data.token);
                        this.props.history.push({ pathname: '/index' })
                    }
                })
            }
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const { captcha } = this.state;
        return (
            <div className={style.form_box}>
                <Form onSubmit={this.onSubmit}>
                    <Form.Item>
                        {getFieldDecorator('username', {
                            rules: [{ required: true, message: '请输入用户名/手机号' }],
                        })(<Input size="large" placeholder="用户名/手机号" autoComplete="off" />)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('password', {
                            rules: [{ required: true, message: '请输入密码' }],
                        })(<Input.Password size="large" placeholder="密码" />)}
                    </Form.Item>
                    <Form.Item>
                        {getFieldDecorator('captcha', {
                            rules: [{ required: true, message: '请输入验证码' }],
                        })(<Input size="large" placeholder="验证码" className={style.authStyle} />)}
                        <span onClick={this.changeCaptcha} className={style.authBox}>
                            {captcha ? (<div dangerouslySetInnerHTML={{ __html: captcha }}></div>) : null}
                        </span>
                    </Form.Item>
                    <div
                        className={style.submit_box}>
                        <NavLink to="/find" className={style.forget_tips}>忘记密码？</NavLink>
                        <Button className={style.submit_btn} block type="primary" htmlType="submit" size="large">登录</Button>
                    </div>
                </Form>
            </div>
        )
    }
}



export default Form.create()(withRouter(LoginForm))
